<template>
  <n-scrollbar class="outline-wrapper">
    <n-menu
      v-model:value="formStore.selectComponentIndex"
      :options="options"
      style="width: 250px"
    ></n-menu>
  </n-scrollbar>
  <!-- <div >
    
  </div> -->
</template>

<script lang="ts" setup>
import { ref, computed, h } from "vue";
import { useFormStore } from "@/store/form";
import {
  InformationCircleOutline,
  CheckmarkCircleOutline,
} from "@vicons/ionicons5";
import { NIcon, NSpace, NTag } from "naive-ui";
const formStore = useFormStore();
const options = computed(() => {
  return formStore.formInfo.content.map((item, index) => {
    return {
      label: `第${index + 1}题`,
      key: index,
      icon: () =>
        h(
          NIcon,
          {
            size: 18,
            color:
              formStore.submitInfo[item.prop]?.isComplete &&
              !formStore.submitInfo[item.prop]?.verifyText
                ? "#63e2b7"
                : "#f2c97d",
          },
          {
            default: () =>
              h(
                formStore.submitInfo[item.prop]?.isComplete &&
                  !formStore.submitInfo[item.prop]?.verifyText
                  ? CheckmarkCircleOutline
                  : InformationCircleOutline
              ),
          }
        ),
    };
  });
});
</script>

<style lang="scss" scoped>
.outline-wrapper {
  display: flex;
  padding: 6px;
  text-align: left;
}
.question-item {
  width: 80px;
}
:deep() {
  .n-menu-item-content-header {
    text-align: left !important;
  }
}
</style>
